<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教师上传资源文件</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<style>
    .t-click {
        user-select: none;
        font-weight: 500;
    }

    /* zdy主题风格*/
    .dtree-zdy-item-this {
        background-color: rgba(224, 222, 222, 0.86) !important;
    }

    /* 当前选中行样式*/
    .dtree-zdy-item:hover {
        background-color: #f2f2f2 !important;
    }

    /* 行悬停样式*/
    .dtree-zdy-item cite {
        font-size: 14px !important;
    }

    /* 行文字样式*/
    .dtree-zdy-item:hover cite {
        color: #096a3b !important
    }

    /* 行悬停文字样式*/
    .dtree-zdy-dtreefont {
        font-size: 30px !important;
    }

    /* 一级图标、二级图标、复选框样式*/
    .dtree-zdy-ficon {
        color: #2F4056 !important;
    }

    /*一级图标特定样式*/
    .dtree-zdy-icon {
        color: #2F4056 !important;
    }

    /*二级图标特定样式*/
    .dtree-zdy-checkbox:hover {
        color: #0db664 !important;
    }

    /*复选框悬停样式*/
    .dtree-zdy-choose {
        color: #10db78 !important;
    }

    /* 复选框选中样式*/
    .dtree-icon-xiangyou {
        font-size: 18px !important;
    }

    .dtree-icon-xiangxia1 {
        font-size: 18px !important;
    }

    .dtree-zdy-checkbox {
        font-size: 18px !important;
    }

    .dtree-zdy-item {
        line-height: 50px;
    }

</style>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div id="teacherName" style="font-size: 18px;font-weight: 500">
                        {teacherName}
                    </div>
                    <br>
                    <div class="layui-inline" style="font-size: 16px;">
                        选择上传资源的课程
                    </div>
                    <div class="layui-inline">
                        <select id="courseList" name="course" lay-verify="">

                        </select>
                    </div>
                    <button type="button" class="layui-btn layui-btn-sm" id="uploadFiles">
                        选择文件
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="emptyList">
                        清空上传列表
                    </button>
                </form>
                <br>
                <div class="layui-upload">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <button id="resourceSubmit" class="layui-btn layui-btn-sm"
                                    lay-submit
                                    lay-filter="resource-query">
                                <i class="layui-icon layui-icon-upload"></i>
                                开始上传
                            </button>
                        </div>
                    </div>
                    <div class="layui-upload-list" style="max-width: 1000px;">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="150">
                                <col width="260">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>上传进度</th>
                                <th>上传时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="fileList"></tbody>
                        </table>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>

    layui.use(['upload', 'form', 'jquery', 'element'], function () {
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , form = layui.form;

        let files = {};

        $.ajax({
            url: '/relation/selectCourseByTeacherId',
            dataType: 'json',
            type: 'post',
            success: function (res) {

                if (res.success) {
                    console.log(res.data.length);
                    $('#teacherName').html('您好：'+res.teacherName+'老师');
                    for (let i = 0; i < res.data.length; i++) {
                        $('#courseList').append('<option value="' + res.data[i].courseName + '">' +
                            res.data[i].courseName + '</option>\n');
                    }
                    form.render('select'); //刷新select选择框渲染
                } else {
                    layer.msg(res.msg, {icon: 5, anim: 6});
                }
            },
            error: function (res) {
                layer.open({
                    title: '提示'
                    , icon: 2
                    , content: '服务器处理异常，获取教师课程列表失败'
                });

            }
        })


        form.on('submit(resource-query)', function (data) {
            return false;
        })

        //文件上传组件
        let uploadInst = upload.render({
            elem: '#uploadFiles' //绑定元素
            , url: '/Resource/uploadResource' //上传接口
            , elemList: $('#fileList') //列表元素对象
            , size: 1024 * 5
            , accept: 'file'
            , data: {
                course: function () {
                    // console.log('course的值如下');
                    let json = $("form").serializeArray();
                    console.log(json);
                    if (json.length===0){
                        return '';
                    }else {
                        return json[0].value;
                    }

                }
            }
            , number: 5
            , bindAction: '#resourceSubmit'
            , auto: false
            , multiple: true
            , progress: function (n, elem, e, index) {
                //console.log(index);
                element.progress('progress-file-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
            }
            , done: function (res, index, upload) {
                console.log(res);
                let that = this;
                if (res.success) { //上传成功
                    let tr = that.elemList.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(4).html('<span class="layui-badge layui-bg-green">成功</span>'); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    return;
                }else {
                    let tr = that.elemList.find('tr#upload-' + index)
                        , tds = tr.children();
                    this.error(index, upload);
                    layer.open({
                        title: '提示'
                        , icon: 2
                        , content: res.msg
                    });
                }

            }
            , allDone: function (obj) { //当文件全部被提交后，才触发
                console.log(obj)
            }
            , choose: function (obj) {
                let that = this;
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                console.log(uploadInst.config.files)
                //读取本地文件
                obj.preview(function (index, file, result) {
                    let date =new Date();
                    let tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td><div class="layui-progress" lay-filter="progress-file-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                        ,'<td>'+date.toLocaleTimeString()+'</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs file-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger file-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.file-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.file-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    that.elemList.append(tr);
                    element.render('progress'); //渲染新加的进度条组件
                });
            }
            , error: function (index, upload) {
                let that = this;
                let tr = that.elemList.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).find('.file-reload').removeClass('layui-hide'); //显示重传
            }
        });

        $('#emptyList').click(function () {
            for (let x in uploadInst.config.files) {
                delete uploadInst.config.files[x];
            }
            $('#fileList').html('');
            //清空 input file 值，以免删除后出现同名文件不可选
            uploadInst.config.elem.next()[0].value = '';
            layer.msg('已清空上传列表', {icon: 1});
        });

    })
</script>

</html>
